import React from 'react'
import { Menu, Button,Drawer } from 'antd';
import {MenuUnfoldOutlined,MenuFoldOutlined} from '@ant-design/icons';
import { useNavigate,useLocation } from 'react-router-dom';
import PersonIn from '../PersonIn'
import {menuConfig} from '../../routers'
import './index.css'
// import { createFromIconfontCN } from '@ant-design/icons';

// const MyIcon = createFromIconfontCN({
//   scriptUrl: '//at.alicdn.com/t/font_3310774_ynlsjgdc9rp.js', // 在 iconfont.cn 上生成
// });

const { SubMenu } = Menu;
//节流阀门
let flag=true;
let timer=null;
export default function MenuSub(props) {
  const location = useLocation()
  let [collapsed,setCollapsed]=React.useState(false)
  const [visible,setVisible]=React.useState(false)
  const [menu,setMenu]=React.useState([location.pathname.charAt(location.pathname.length-1)])
  const register = useNavigate()
  let toggleCollapsed = () => {
    props.setCollapsed()
    setCollapsed(!collapsed)
  }
  return (
    <div style={{ width: '100%',height:'100%',position:'relative'}} className='menu-div'>
      <Menu mode="inline" onClick={(e)=>{
        if(e.key==='/home/information6'){
          setVisible(true)
          return
        }
        register(e.key)
      }}
        onOpenChange={(keys)=>{
          if(!timer){
            timer=setTimeout(() => {
              flag=true
              timer=null
            }, 300);
          }
          if(flag){
            const latestOpenKey = keys.find((key) => menu.indexOf(key) === -1);
            setMenu(latestOpenKey ? [latestOpenKey] : []);
            flag=false
          }
        }}
        openKeys={menu}
        style={{ width: '100%',height:'100%',paddingBottom:'20px',overflowY:'auto',overflowX:'hidden' }}
        className='menu-scroll'
        defaultSelectedKeys={[location.pathname]}
      >
        {
          menuConfig.map(item=>{
            return (<SubMenu
              key={item.id}
              title={item.title}
              icon={item.icon}
            >
              {
                item.children.map(item0=>{
                  return (<Menu.Item key={item0.key}>{item0.title}</Menu.Item>)
                })
              }
            </SubMenu>)
          })
        }
      </Menu>
      <Button onClick={toggleCollapsed} style={{width:'100%',position:'absolute',bottom:'0',borderTop:'1px #f0f2f5 solid',background:'#ffffff'}} type='link'>
        {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
      </Button>
      <Drawer headerStyle={{textAlign:'center'}} title="个人信息" placement="right" onClose={()=>{
        setVisible(false)
      }} visible={visible} closable={false}>
        <PersonIn></PersonIn>
      </Drawer>
    </div>
  );
};
